<!--
 * @Descripttion: 渠道管理-查看码
 * @Author: 何伟伦 weilun@ssc-hn.com
 * @Date: 2024-04-10
 * @LastEditors: 何伟伦 weilun@ssc-hn.com
 * @LastEditTime: 2024-04-26
-->
<template>
  <div class="ssc-list org-position-list">
    <div class="ssc-search">
      <a-row :gutter="24">
        <a-col :span="5">
          <a-form-item label="关联渠道">
            <a-tree-select allowClear :fieldNames="{ children: 'children', label: 'channelName', value: 'channelId' }" v-model:value="searchParam.channelId" tree-data-simple-mode style="width: 100%" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="treeData" placeholder="请选择渠道" :load-data="onLoadData" />
          </a-form-item>
        </a-col>
        <a-col :span="5">
          <a-form-item label="批次名称">
            <a-input v-model:value="searchParam.batchName" placeholder="请输入批次名称" allowClear />
          </a-form-item>
        </a-col>
        <a-col :span="5">
          <a-form-item label="批次编号">
            <a-input v-model:value="searchParam.batchNumber" placeholder="请输入批次编号" allowClear />
          </a-form-item>
        </a-col>
        <a-col :span="5">
          <a-form-item label="码值">
            <a-input v-model:value="searchParam.codeValue" placeholder="请输入码值" allowClear />
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-row justify="end">
            <a-button @click="clear()">重置</a-button>
            <a-button class="ml-4" type="primary" @click="search()">查询</a-button>
          </a-row>
        </a-col>
      </a-row>
    </div>
    <div class="ssc-table">
      <div class="ssc-table-header">
        <span class="ssc-table-header-title">查看码</span>
      </div>
      <a-table :columns="columns" :data-source="dataList" :loading="loading" :pagination="pagination" @change="onPaginationChange" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import type { TreeSelectProps } from 'ant-design-vue'
  import { onMounted, reactive, ref } from 'vue'

  import { requestCheckCodeList } from '/@/api/business/tracecode/channel'
  import { requestFirstChannel, requestSubChannel } from '/@/api/business/tracecode/channel'
  import { HttpCodeEnum } from '/@/enums/httpEnum'
  import { useQueryPagination } from '/@/hooks/useQueryPagination'

  /** 搜索条件 */
  const searchParam = reactive({
    channelId: '',
    batchName: '',
    batchNumber: '',
    codeValue: '',
  })
  const treeData = ref<TreeSelectProps['treeData']>([])

  /** 表格列配置 */
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      customRender: (row) => `${row.index + 1}`,
    },
    { title: '码值', dataIndex: 'codeValue' },
    { title: '批次名称', dataIndex: 'batchName' },
    { title: '批次编号', dataIndex: 'batchNumber' },
    { title: '商品', dataIndex: 'goodsName' },
    { title: '关联渠道', dataIndex: 'channelName' },
    { title: '关联时间', dataIndex: 'createdTime' },
  ]

  const { loading, queryList, dataList, pagination, onPaginationChange } = useQueryPagination<CheckCodesTypes.IRequest, CheckCodesTypes.IResponse[]>(searchParam, requestCheckCodeList)

  onMounted(() => {
    initChannel()
    search()
  })

  /**
   * 重置
   */
  const clear = () => {
    searchParam.channelId = ''
    searchParam.batchName = ''
    searchParam.batchNumber = ''
    searchParam.codeValue = ''
    search()
  }

  /**
   * 搜索
   */
  const search = async () => queryList({ current: 1 })

  /**
   * 初始化一级渠道
   */
  const initChannel = async () => {
    const { responseCode, responseData } = await requestFirstChannel({})
    if (responseCode === HttpCodeEnum.SUCCESS) {
      treeData.value = responseData.map((item) => {
        return { ...item, isLeaf: item.subCount ? false : true, pId: 0, id: item.channelId }
      })
    }
  }

  /** 加载子节点 */
  const onLoadData = async (treeNode) => {
    const { id } = treeNode.dataRef
    const { responseCode, responseData } = await requestSubChannel({ channelId: id })
    if (responseCode === HttpCodeEnum.SUCCESS) {
      const data = responseData.map((item) => {
        return { ...item, isLeaf: item.subCount ? false : true, pId: id, id: item.channelId }
      })
      data.forEach((item) => {
        treeData.value = treeData.value.concat({ ...item })
      })
    }
  }
</script>

<style lang="less" scoped></style>
